<script setup>
import { useUserStore } from "@/stores/user";
import { ref } from "vue";

const container = ref(null);
const signInBtn = () => {
  
  container.value.classList.remove("panel-active");
};
const signUpBtn = () => {
  container.value.classList.add("panel-active");
};

import { login } from "@/api/login";
import { register } from "@/api/register";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const router = useRouter();
const userStore = useUserStore();

const formLogin = ref({
  userId: "123456",
  password: "abcd",
});
// const formRegister = ref({
//   userid: "wwwwww",
//   password: "wwwwwww",
//   confirmPassword: "wwwwwww",
//   email: "111@qq.com",
//   username: "wwww",
//   gender: "2",
//   phone: "11111111",
// });
const formRegister = ref({
  userId: "",
  password: "",
  confirmPassword: "",
  email: "",
  username: "",
  gender: "",
  phone: "",
});

import { validateLogin, validateRegister } from "@/utils/validate.js";
const handleLogin = async () => {
  const valid = validateLogin(formLogin.value);

  if (!valid) return;

  const loginResult = await login(formLogin.value); //调用api
 



  if (loginResult.data.code === 0) {
    //后端定义code为0表示登录成功
    ElMessage.success("登录成功，欢迎你");
    
    const token = loginResult.data.data.token;
    userStore.setToken(token);

    userStore.setUserId(formLogin.value.userId);
    router.push("/home");
  } else {
    ElMessage.error(loginResult.data.msg);
   
  }
};

  // if (!registerResult.success) {
  //       if (responseData.code === 0) {
  //         ElMessage.success('注册成功')
  //         router.push('/login')
  //       } else {
  //         ElMessage.error(responseData.msg)
  //       }
  //     } else {
  //       console.log('Register failed:', registerResult.error)1111
  //       return false
  //     }
const registerForm = ref(null);
const handleRegister = async () => {
  const valid = validateRegister(formRegister.value);
  if (!valid) return;
  const { confirmPassword, ...formDataWithoutConfirm } = formRegister.value; //去除confirmPassword
  const registerResult = await register(formDataWithoutConfirm);
  console.log(registerResult);

  if (registerResult.data.code === 0) {
    ElMessage.success("注册成功");
    registerForm.value.reset(); //注册成功后清空表单
    signInBtn(); //注册成功后自动切换到登录页面
  } else {
    ElMessage.error(registerResult.data.msg);
  }
};
</script>

<template>
  <div class="big-container">
    <div class="right-container" ref="container">
      <div class="container-form container-signup">
        <form class="form-register" ref="registerForm">
          <h2 class="form-title">注册账号</h2>

          <div class="form-group">
            <label for="register-userid">用户id:</label>
            <input
              type="text"
              id="register-userid"
              v-model="formRegister.userId"
              class="input2"
            />
          </div>
          <div class="form-group">
            <label for="register-name">名字:</label>
            <input
              type="text"
              id="register-name"
              v-model="formRegister.username"
              class="input2"
            />
          </div>

          <div class="form-group">
            <label for="register-password">密码:</label>
            <input
              type="password"
              id="register-password"
              v-model="formRegister.password"
              class="input2"
            />
          </div>
          <div class="form-group">
            <label for="register-confirm-password">确认密码:</label>
            <input
              type="password"
              id="register-confirm-password"
              v-model="formRegister.confirmPassword"
              class="input2"
            />
          </div>
          <div class="rdo-item">
            <span>&nbsp;&nbsp;&nbsp;&nbsp; 性别：</span>&nbsp;&nbsp;&nbsp;&nbsp;
            <input
              class="input-radio"
              type="radio"
              name="gender"
              value="1"
              v-model="formRegister.gender"
            />男&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
            <input
              class="input-radio"
              type="radio"
              name="gender"
              value="2"
              v-model="formRegister.gender"
            />女
          </div>
          <div class="form-group">
            <label for="register-phone">手机号:</label>
            <input
              type="text"
              id="register-phone"
              name="email"
              v-model="formRegister.phone"
              class="input2"
            />
          </div>
          <div class="form-group">
            <label for="register-email">邮箱:</label>
            <input
              type="text"
              id="register-email"
              name="email"
              v-model="formRegister.email"
              class="input2"
            />
          </div>
          <br />

          <button type="button" class="btn" @click="handleRegister">
            点击注册
          </button>
        </form>
      </div>
      <div class="container-form container-signin">
        <form class="form">
          <h2 class="form-title">欢迎登录仓库管理系统</h2>
          <input
            type="text"
            placeholder="用户名"
            class="input"
            v-model="formLogin.userId"
          />
          <input
            type="password"
            placeholder="密码"
            class="input"
            v-model="formLogin.password"
          />
          <a href="#" class="link">忘记密码？</a>
          <button type="button" class="btn" @click="handleLogin">
            点击登录
          </button>
        </form>
      </div>
      <div class="container-overlay">
        <div class="overlay">
          <div class="overlay-panel overlay-left">
            <button class="btn" id="signIn" @click="signInBtn">
              已有帐号?直接登录
            </button>
          </div>
          <div class="overlay-panel overlay-right">
            <button class="btn" id="signUp" @click="signUpBtn">
              没有账号?点击注册
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.right-container {
  background-color: #e7e7e7;
  border-radius: 0.7rem;
  box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
    0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
  height: 420px;

  max-width: 750px;

  overflow: hidden;
  position: relative;
  left: 26%;
  top: 25%;
  width: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 登录、注册框通用部分 */
.container-form {
  height: 100%;
  position: absolute;
  top: 0;
  transition: all 0.6s ease-in-out;
}

.container-signin {
  right: 100; /*不是0*/
  width: 50%;
  opacity: 1;
  z-index: 2;
}
.container-signup {
  left: 0;
  opacity: 0;
  width: 50%;
  z-index: 1;
}

.form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 3rem;
  height: 100%;
  text-align: center;
  background-color: #e7e7e7;
}
.form-register {
  margin: 30px 0;
  padding: 0 3rem;
  height: 100%;
  text-align: center;
  background-color: #e7e7e7;
}
.form-title {
  color: #281939;
  font-weight: 300;
  margin: 0;
  margin-bottom: 1.25rem;
}

.input {
  width: 100%; /*占满父级一行，所以会自动换行*/
  background-color: #fff;
  padding: 0.9rem 0.9rem;
  margin: 0.5rem 0;
  border: none;
  outline: none;
}
.input2 {
  width: 60%;
  background-color: #fff;
  padding: 0.45rem 0.45rem;
  margin: 0.25rem 0;
  border: none;
  outline: none;
}
.form-register label {
  width: 30%;
  display: inline-block;
  text-align: center;
}

.btn {
  background-color: #f25d8e;
  box-shadow: 0 4px 4px rgba(255, 112, 159, 0.3);
  border-radius: 5px;
  color: none;
  cursor: pointer;
  border: none;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  padding: 0.9rem 4rem;
  text-transform: uppercase;
  transition: transform 80ms ease-in;
}
.form > .btn {
  margin-top: 1.5rem;
}
.btn:active {
  transform: scale(0.95);
}
.container-overlay {
  position: absolute;
  height: 100%;
  left: 50%;
  top: 0;
  overflow: hidden;
  transition: transform 0.6s ease-in-out;
  width: 50%;
  z-index: 100;
}
.overlay {
  width: 200%;
  height: 100%;
  position: relative;
  left: -100%;
  background: url(../assets/bg.jpg) no-repeat center fixed;
  background-size: cover;
  transition: left 0.6s ease-in-out;
  transform: translateX(0);
}
.overlay-panel {
  height: 100%;
  width: 50%;
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transform: translateX(0);
  transition: transform 0.6s ease-in-out;
}
.overlay-left {
  transform: translateX(-20%);
}
.overlay-right {
  right: 0;
  transform: translateX(0);
}
.panel-active .overlay-left {
  transform: translateX(0);
}
.panel-active .container-overlay {
  transform: translateX(-100%);
}
.panel-active .overlay {
  transform: translateX(50%);
}
.panel-active .container-signin {
  transform: translateX(100%);
}
.panel-active .container-signup {
  opacity: 1;
  z-index: 5;
  transform: translateX(100%);
}
.link {
  color: #0b0a0b;
  width: 100%;
  text-decoration: none;
  padding: 0.9rem 0.9rem;
  margin: 0.5rem 0;
  border: none;
  outline: none;
}
.big-container {
  position: absolute;
  background: #e7e7e7 url(../assets/bg.jpg) center no-repeat fixed;

  background-size: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.el-message {
  width: 200px; /* 设置消息框的宽度 */
  height: 50px; /* 设置消息框的高度 */
}
.input-radio {
  appearance: none; /* 清除默认样式 */
  -webkit-appearance: none; /* Safari 和 Chrome */
  -moz-appearance: none; /* Firefox */
  width: 20px; /* 自定义radio的大小 */
  height: 20px; /* 自定义radio的大小 */
  border: 2px solid #1cbe62; /* 边框样式 */
  border-radius: 50%; /* 圆形的边框 */
  outline: none; /* 移除默认的选中时的边框 */
  cursor: pointer; /* 鼠标指针样式 */
  margin-right: 5px; /* 调整radio之间的间距 */
  /* 设置未选中时的背景图片 */
}

/* radio选中状态下的样式 */
.input-radio:checked {
  background-color: #21d064; /* 选中时的背景颜色 */
}

/* 鼠标悬停时的样式 */
.input-radio:hover {
  border-color: #666; /* 鼠标悬停时的边框颜色 */
}

.rdo-item {
  display: flex; /* 设置为flex布局 */
  align-items: center; /* 垂直居中 */
}
</style>
